<template>
  <button @click="openSingle">打开单选123</button>
  <button @click="openMulti">打开多选</button>
  <view>{{ selectData }}</view>

  <view>visible: {{ visible }}</view>

  <!-- <x-tree
    ref="treeRef1"
    :localdata="listData"
    @confirm="confirm"
    :defaultExpandAll="false"
    :value="[1]"
    :show-search="true"
    title="来个title"
    idField="value"
    nameField="label"
    childrenField="list"
    v-model:visible="visible"
  /> -->

  <x-tree
    ref="treeRef2"
    :value="[11]"
    :localdata="listData"
    @confirm="confirm"
    :defaultExpandAll="true"
    :multiple="true"
    :debug="false"
    idField="value"
    nameField="label"
    childrenField="list"
  />
</template>

<script setup lang="ts">
  import { ref } from "vue";

  
  const visible = ref(false)
  const treeRef1 = ref();
  const treeRef2 = ref();

  const openSingle = () => {
    // treeRef1.value?.open();
    visible.value = true
  };

  const openMulti = () => {
    treeRef2.value?.open();
  };

  const selectData = ref();
  const confirm = (data) => {
    console.log(data);
    selectData.value = data;
  };

  const listData = ref([
    {
      value: 1,
      label: "公司1",
      list: [
        {
          value: 11,
          label: "研发部",
          list: [
            {
              value: 111,
              label: "张三",
              list: [
                {
                  value: 1111,
                  label: "1111",
                  list: [
                    {
                      value: 11111,
                      label: "单选，只能选一个，父子之间也就一个，更别说兄弟之间。单选，只能选一个，父子之间也就一个，更别说兄弟之间。",
                    },
                  ],
                },
              ],
            },
            {
              value: 112,
              label: "李四",
            },
          ],
        },
        {
          value: 12,
          label: "综合部",
          list: [
            {
              value: 121,
              label: '综合121'
            },
            {
              value: 122,
              label: '综合122'
            }
          ]
        },
      ],
    },
    {
      value: 2,
      label: "公司2",
      list: [
        {
          value: 21,
          label: "研发部",
        },
        {
          value: 22,
          label: "综合部",
        },
        {
          value: 23,
          label: "财务部",
        },
      ],
    },
    // {
    //   value: 3,
    //   label: "公司3",
    // },
    // {
    //   value: 4,
    //   label: "公司4",
    //   list: [
    //     {
    //       value: 41,
    //       label: "研发部",
    //     },
    //     {
    //       value: 42,
    //       label: "研发部",
    //     },
    //     {
    //       value: 43,
    //       label: "研发部",
    //     },
    //     {
    //       value: 44,
    //       label: "研发部",
    //     },
    //     {
    //       value: 45,
    //       label: "研发部",
    //     },
    //     {
    //       value: 46,
    //       label: "研发部",
    //     },
    //     {
    //       value: 47,
    //       label: "研发部",
    //     },
    //     {
    //       value: 48,
    //       label: "研发部",
    //     },
    //     {
    //       value: 49,
    //       label: "研发部",
    //     },
    //   ],
    // },
  ]);
</script>
